<template>
  <div class="add-favor-container">
    <div v-if="messageList.length > 0" class="dynamic-table">
      <table cellspacing="0" cellpadding="0" border="0">
        <tbody>
          <tr>
            <td>序号</td>
            <td>位置</td>
            <td>动态</td>
            <td>接收时间</td>
          </tr>
          <tr
            v-for="(item, index) in messageList"
            :key="item.id"
            class="message-row"
          >
            <td>{{ index + 1 }}</td>
            <td class="position">
              <div>{{ item.latitude }}</div>
              <div>{{ item.longitude }}</div>
            </td>
            <td :title="item.content">
              <el-tooltip :content="item.content" placement="top"
                ><span>{{ item.content }}</span></el-tooltip
              >
            </td>
            <td :title="item.createTime">
              <el-tooltip :content="item.createTime" placement="top"
                ><span>{{ item.createTime }}</span></el-tooltip
              >
            </td>
          </tr>
        </tbody>
      </table>
      <div class="pagination">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="page.total"
          :current-page="page.currentPage"
          @current-change="onPageChange"
        ></el-pagination>
      </div>
    </div>
    <template v-else>
      <div class="empty-list-container">
        <img
          class="empty-list-container-img"
          src="~@/assets/images/map/no-dynamic-report.png"
          alt=""
          srcset=""
        />
        <div class="empty-list-container-txt">
          当前暂未收到动态快报，如需查看详细动态报，可<a
            @click="goToDynamicReport"
            >点击查看动态报</a
          >
        </div>
      </div>
    </template>
  </div>
</template>
<script>
import { getDynamicBriefPageList } from "@/api/shipGroup";
export default {
  props: {
    shipInfo: {
      type: Object,
    },
  },
  data() {
    return {
      messageList: [
        // {
        //   id: "1",
        //   locationName: "locationName",
        //   content: "sdfjskdljfklsdjfklsdejfdkl",
        //   delFlag: null,
        //   createBy: null,
        //   createTime: new Date().toString(),
        //   updateBy: null,
        //   updateTime: null,
        //   shipName: "shipName",
        //   shipId: "shipId",
        //   longitude: "6°04.4933′N",
        //   latitude: "86°23.0114′E",
        //   sendUserId: null,
        // },
      ],
      page: {
        total: 100,
        currentPage: 1,
      },
    };
  },
  mounted() {
    this.getDynamicList();
  },
  methods: {
    // 获取分组列表
    getDynamicList() {
      getDynamicBriefPageList({
        shipId: this.shipInfo.shipId,
        pageNumber: this.page.currentPage,
        pageSize: 10,
      })
        .then((res) => {
          if (res.result) {
            this.messageList = res.result.records || [];
            this.page.total = res.result.total;
          }
        })
        .catch(() => {
          this.messageList = [];
        });
    },
    onPageChange(p) {
      this.page.currentPage = p;
      this.getDynamicList();
    },
    cancelClick() {
      this.$emit("cancel");
    },
    goToDynamicReport() {
      window.open(
        "/modules/voyageno/voyageno/voyage-dynamic-report",
        "_target"
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.add-favor-container {
  padding: 20px 9px;

  .dynamic-table {
    // margin: 16px 0px;

    table {
      width: 100%;
      // border-bottom: 1px solid #d8d8d8;
      color: #666666;
      // margin-top: 9px;
      border-collapse: separate;
      border-spacing: 0 10px;

      tr {
        border-radius: 3px;
        overflow: hidden;
        box-shadow: 0px 1px 4px 0px rgba(0,74,170,0.09);

        &:first-child {
          background: #e9eeff;
          color: #666;
          box-shadow: unset;
        }
        td {
          // border-top: 1px solid #d8d8d8;
          height: 50px;
          font-size: 14px;

          font-weight: 400;
          color: #666666;
          // width: 91px;
          // height: 34px;
          text-align: center;
          padding: 4px 0;

          max-width: 100px;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
      }

      .position {
        color: #004aaa;
      }

      .message-row {
        box-shadow: 0px 1px 4px 0px rgba(0, 74, 170, 0.09);
        margin-top: 10px;
      }
    }

    .pagination {
      // margin: auto;
      text-align: center;
      margin-top: 20px;

      ::v-deep .el-pager .active {
        background: #004aaa;
      }
    }
  }

  .empty-list-container {
    .empty-list-container-img {
      width: 282px;
      height: 282px;
      margin: auto;
      display: block;
    }

    .empty-list-container-txt {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
      line-height: 20px;
      text-align: center;
      a {
        color: #004aaa;
        text-decoration: underline;
      }
    }
  }
}
</style>
